<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>0</p>
  <button>count++</button>


  <script>
    let count = sessionStorage.getItem("count") || 0;
    document.querySelector("p").innerHTML = count;
    document.querySelector("button").onclick = () => {
      // count++;
      // document.querySelector("p").innerHTML = count;
      // localStorage.setItem("b", true)
      // localStorage.setItem("c", JSON.stringify({x:10}))
      
      // console.log(localStorage.getItem("a"))
      // localStorage.removeItem("c")
      // localStorage.clear()

      // count++;
      // document.querySelector("p").innerHTML = count;
      // localStorage.setItem("count", count)


      count++;
      document.querySelector("p").innerHTML = count;
      sessionStorage.setItem("count", count)
    }

    // 所有js里面的变量，函数等，都是存在浏览器的内存中的
    // 当页面刷新，内存中的所有数据都会清空

    // 想要保留原来的数据有两种方式
    // 1. 通过数据库进行保存
    // 2. 本地存储


    // 本地存储
    // 存的时候都是字符串
    // 一定要存数组或者对象的时候，需要使用JSON.stringify()转成字符串。取的时候要用JSON.prase()转回来
    // 本地存储存的内容，如果没有手动删除，那么就会一直存在
    // 本地存储可以跨窗口进行共享，但是只限于主机名相同的

    // localStorage.setItem(key, value) 
    // localStorage.setItem("a", 12345) // 将键值对存到本地存储
    // localStorage.getItem("a") // 把本地存储的内容取出来
    // localStorage.removeItem("c") // 删除本地存储的内容
    // localStorage.clear() // 清空本地存储






    // 会话存储
    // sessionStorage
    // sessionStorage.setItem("a", 12345) // 将键值对存到本地存储
    // sessionStorage.getItem("a") // 把本地存储的内容取出来
    // sessionStorage.removeItem("c") // 删除本地存储的内容
    // sessionStorage.clear() // 清空本地存储



    // 区别：
    // 会话存储是一次性的
    // 会在窗口关闭的时候自动清除的
    // 会话存储的数据是不能跨窗口访问的
  </script>
</body>
</html>